<template>
	<view>
        <view class="couponGoods-title">选择套票</view>
        <view class="couponGoods-box">
            <view class="couponGoods-item" v-for="zt in ztCoupons" :key="index" @click="navigatorTO(zt.id)">
            <view class="imagebox">
                <view class="inner-imagebox bg-line-color"><image :src="zt.logo" class="border-line-color"></image></view>
            </view>
            <view class="textbox">{{ zt.name }}</view>
            <view class="bt bg-line-color"><text>立即购买 ￥{{ zt.price }}</text></view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref ,onMounted} from 'vue'
import { getCouponListBy_ztTag } from "@/api/coupon"
const ztCoupons = ref<any>([])
onMounted(() => {
    getCouponListBy_ztTag({
        ztTag:'wzry',
        pageSize:10,
        pageNo:1
    }).then(res => {
        ztCoupons.value = res.data.records
    })
})
const navigatorTO = (id : any) => {
  uni.navigateTo({
    url:`/pages/mall/couponGoods?id=${id}`
  })
}
</script>
<style lang="scss">
.couponGoods-title{
  padding: 32upx;font-weight: 600;
}
.couponGoods-box{
  padding:0 32upx 32upx;
  height: 64vh;
  overflow: hidden;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  .couponGoods-item{
    margin:64upx 0 40upx;
    background-image:url('https://wx.sijiyoufu.com/static/imgs/project/good-item-bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display:flex;
    justify-content: space-between;
    position: relative;
    font-size:32upx;
    color:#fff;
    .textbox{
      padding: 52upx;
      width: 62%;
      font-size: 36upx;
      font-weight: 600;
    }
    .inner-imagebox{
      width:220upx;
      height:220upx;
      position: absolute;
      left:-14upx;
      top:-60upx;
      border-radius: 220upx;
      padding:9upx;
      box-sizing: border-box;
    }
    .imagebox{
      width:220upx;
      height:220upx;
      position: relative;
      image{
        width:204upx;
        height:204upx;
        border-radius: 204upx;
      }
    }
    .bt{
      position: absolute;
      right: 0;
      bottom: -28upx;
      width: 290upx;
      height: 72upx;
      line-height: 72upx;
      padding: 5upx;
      border-radius: 72upx;
      text{
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        background:rgba(255,255,255,.92);
        color:#2db5c3;
        width:100%;
        border-radius: 72upx;
      }
    }
  }
}
</style>